﻿<!DOCTYPE html>
<html>
<head>    
	<meta charset="utf-8">
    <title>登录</title>
    <!-- 引入 css 样式-->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/a3common.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/css/font_43459_lbtux0zjkr6yldi.css">

    <!-- 本地引入 引入 vue、axios 、elementUI -->
    <script src="/js/vue.js"></script>
<!--    <script src="/js/axios-0.18.0.js"></script>-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <script src="/plugins/elementui/index.js"></script>

    <!-- 引入 js(封装的axios)文件 使用发方式和之前的操作都是一样的 就是添加了拦截器 -->
    <script src="/js/request.js"></script>

</head>
<body>
    <div id="main" class="main-warp">
        <div class="main-content">
            <div class="formDiv">
                <h2 class="text-center">登录</h2>
                <form id="loginForm" method="post">
                    <div class="dataform" >
                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-yonghu1"></span>
                            <input type="text" v-model="loginVo.username"  class="inputs" placeholder="手机号码或邮箱" maxlength="64">
                        </div>

                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-baomi"></span>
                            <input class="inputs" type="password" v-model="loginVo.password" placeholder="密码" maxlength="20">
                        </div>

                        <div class="btn-warp gap">
                            <div class="text-center">
                                <input type="hidden" value="jsform" id="_app"/>
                                <button type="button" @click="login" class="btn btn-block lgbtn blue">登录</button>
                            </div>
                        </div>
                        <div class="biggap third-party-title">
                            <h5 class="text-center"><span>第三方账号登录</span></h5>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <button type="button" @click="test" class="btn btn-block lgbtn blue">测试请求以及响应拦截器</button>
    </div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el:"#main",
        data(){
            return {
                /*登陆用户数据模型*/
                loginVo: {
                    username: 'admin',
                    password: '1234'
                }
            }
        },
        methods: {
            login1111(){
                axios({
                    url:"/login",
                    method:"post",
                    data:this.loginVo
                }).then(resp=>{
                    if (resp.data.code == "200"){
                        //拿到token
                        let token = resp.data.data.token;
                        //本地存储
                        localStorage.setItem("token",token)
                        //页面跳转  main.html 主页
                        location.href = "/pages/main.html"
                    }
                })
            },
            login() {
                request({
                    url: "/login",
                    method: "post",
                    data: this.loginVo
                }).then(data => {
                    console.log("登陆响应数据：",data);
                    var code = data.data.code;
                    var token = data.data.data.token;
                    if(code == "200") {
                        /*前端页面保存token*/
                        /**
                         * localStorage：在本地永久保存数据，除非用户手动删除
                         */
                        localStorage.setItem("token", token);
                        location.href = "/pages/main.html";
                    }
                }).catch(data => {

                });
            },
            test(){
                request({
                    url: "/hello",
                    method: "get"
                }).then(resp=>{
                    console.log(resp.data);
                })
            }
        }
    });
</script>